<template>
  <div>
    <div class="FromContainer">
      <el-form :model="loginForm" status-icon :rules="rules" ref="loginForm">
        <div>
          <el-form-item prop="userPhone">
            <el-input type="text" placeholder="手机号" v-model.number="loginForm.userPhone">
              <el-form-item slot="append">
                <el-button v-show="verification" @click.native="handleClick('loginForm')">点击获取验证码</el-button>
                <el-button v-show="!verification">
                  <span>{{timer}}</span>秒后重新获取
                </el-button>
              </el-form-item>
            </el-input>
          </el-form-item>
          <el-form-item>
            <el-input type="text" placeholder="验证码" v-model="verificationCode"></el-input>
          </el-form-item>
        </div>
        <div>
          <p class="login_tips" style="color:#909399;">
            温馨提示:未注册过的手机号，登录时自动注册,且代表您已同意！
            <a class="login_tips" href="#">用户服务协议</a>
          </p>
          <el-form-item>
            <el-button @click="gotolink" type="primary">登录</el-button>
          </el-form-item>
        </div>
      </el-form>
    </div>
  </div>
</template>
 
<script>
export default {
  name: 'Login',
  data() {
    var checkPhone = (rule, value, callback) => {
      if (!value) {
        return callback(new Error('手机号不能为空'))
      } else {
        const reg = /^1[3|4|5|7|8][0-9]\d{8}$/
        if (reg.test(value)) {
          callback()
        } else {
          return callback(new Error('请输入正确的手机号'))
        }
      }
    }
    return {
      loginForm: {
        userPhone: ''
      },
      verificationCode: '',
      verification: true, //通过v-show控制显示获取还是倒计时
      timer: 10, //定义初始时间为10s
      rules: {
        userPhone: [{ validator: checkPhone, trigger: 'blur' }]
      }
    }
  },
  methods: {
    handleClick(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          this.verification = false //点击button改变v-show的状态
          let auth_timer = setInterval(() => {
            //定时器设置每秒递减
            this.timer-- //递减时间
            if (this.timer <= 0) {
              this.verification = true //30s时间结束还原v-show状态并清除定时器
              this.timer = 30
              clearInterval(auth_timer)
            }
          }, 1000)
        } else {
          return false
        }
      })
    },
    gotolink() {
      //点击跳转至上次浏览页面
      // this.$router.go(-1)

      //指定跳转地址
      this.$router.replace('/home')
    }
  }
}
</script>
 
<style scoped>
</style>
